<template>
    <div class="mylist">
        <h3>猜你喜欢</h3>
        <div class="list">
            <div  v-for="(item,index) in dianjia" @click="paixu(index)" :key="index" :class="(indexs==index?'color':'')">{{item}}</div>
        </div>
        <div class="dianpu" v-for="(item,index) in dianpu" :key="index">
            <div class="img">
                <img :src="item.img">
            </div>
            <div class="xinxi">
                <p>{{item.name}}</p>
                <p>价格：{{item.price}}</p>
                <p>距离：{{item.distance}}</p>
                <p>月销量:{{item.xiaolian}}</p>
            </div>
        </div>
    </div>    
  
</template>

<script>
// var url="https://img1.baidu.com/it/u=2820222784,2850106904&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500";
export default {
    data(){
        return{
            indexs:0,
            dianjia:["综合排序","距离最近","销量最高","筛选"],
            dianpu:[
                {img:"https://img1.baidu.com/it/u=2820222784,2850106904&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",name:"烤鸭店",distance:"88",price:25,xiaolian:8888},
                {img:"https://img1.baidu.com/it/u=2820222784,2850106904&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",name:"炸鸡店",distance:"77",price:58,xiaolian:7777},
                {img:"https://img1.baidu.com/it/u=2820222784,2850106904&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",name:"烧烤店",distance:"66",price:88,xiaolian:9999},
                {img:"https://img1.baidu.com/it/u=2820222784,2850106904&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",name:"卤肉饭",distance:"55",price:30,xiaolian:4448},
                {img:"https://img1.baidu.com/it/u=2820222784,2850106904&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",name:"刀削面",distance:"22",price:20,xiaolian:3999},
            ]
        }
    },
    methods: {
        paixu(index){
            this.indexs =index;
            this.dianjia.sort((a,b),(indexs)=>{
                if(indexs==0){
                    return a.price-b.price
                }else if(indexs==1){
                    return a.distance-b.distance
                }else if(indexs==2){
                    return a.xiaolian-b.xiaolian
                }else if(indexs==3){
                    return a.price-b.price
                }  
            })
        }
    },
}
</script>

<style>
   .list{
    display: flex;
    width: 100%;
    align-content: space-around;
   }
   .list>div{
    margin: 10px 10px;
   }
   .dianpu{
    display: flex;
    width: 100%;
    height: 80px;
    align-content: space-around;
    margin-bottom: 20px;
   }
   .img{
    width: 80px;
    overflow: hidden;
    margin-right: 20px;
    margin-left: 10px;
    
   }
   .img>img{
    width: 100%;
   }
   .xinxi{
    flex: 1;
   }
   .color{
    color: lightskyblue;
   }
</style>